<template>
	<div class="flex flex-col w-full h-full">
		<div class="flex flex-col w-full h-full">
			<div class="h-full w-full flex flex-col justify-between">
				<div class="h-[664px] flex flex-col overflow-y-auto">
					<base-list-plus
						auto
						class="flex-1"
						:loading="loading"
						:isFinish="isFinish"
						:isEmpty="isEmpty"
						:error="error"
						@load="search"
						@reload="search(true)">
						<detail-header v-if="detailData" :detail="detailData" />
						<detail-item v-for="item in list" :key="item.id" :item="item" />
					</base-list-plus>
				</div>
				<detail-footer @reload="search(true)" :tweetId="+selectId" />
			</div>
		</div>
	</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { BaseListPlus } from '@/components/base'
import { useAppStore } from '@/store'
import { getCommentList, getFeedsDetail } from '@/api/feed'
import { useRequest } from '@/hooks'
import DetailFooter from './atme-components/footer.vue'
import DetailItem from './atme-components/list-item.vue'
import DetailHeader from './atme-components/header.vue'

const props = defineProps({
	selectId: {
		type: Number,
		default: 0
	}
})
const appStore = useAppStore()
const detailData = ref(null)

const getDetailInfo = async () => {
	try {
		const { data } = await getFeedsDetail({
			tweetId: props.selectId,
			currency: appStore.currency,
			locale: appStore.lang,
			oddsStyle: appStore.odds
		})
		detailData.value = data
		// atmeDetailRef.value?.onRefresh()
		search(true)
	} catch (error) {}
}

const { run, loading, error, list, isFinish, isEmpty } = useRequest<any>(getCommentList, {
	pageSize: 20
})

const search = (refresh = false) => {
	run(
		{
			locale: appStore.lang,
			oddsStyle: appStore.odds,
			tweetId: props.selectId
		},
		{ refresh }
	)
}

getDetailInfo()
</script>
